<template>
  <div style="margin-top:50px;">   
    <TopWithBack></TopWithBack>
     <div class="updatepassword_box">
        <input type="tel" id="phone" placeholder="请输入您的手机号" value="" v-model='telpahone'/>
      </div>
      <div class="index_divide"></div>
      <div class="updatepassword_idetity_box">
          <input type="text" id="phoneverify" name="phoneverify" placeholder="请输入验证码" v-model="code"/>
          <button type="button" id="sendvf" v-if="timer==0" @click="send_message">发送验证码</button>
          <button type="button" id="sendvf" v-else style="width:160px;">({{timer}})秒后重新发送</button>
      </div>
      <div class="index_divide"></div>
      <div class="updatepassword_box">
          <input type="text" name="pwdtwo" id="pwdtwo" placeholder="请输入您的密码" v-model='password'/>
      </div>
      <div class="index_divide"></div>
      <div class="index_divide"></div>
         <div class="updatepassword_box">
            <input type="password" name="pwdtwo1" id="pwdtwo1" placeholder="请重新输入您的密码" v-model='repassword'/>
        </div>
      <div class="index_divide"></div>
      <div class="update_btn" @click="findPwd"><input type="submit" value="确定"></div>
  </div>
</template>
<script>
import TopWithBack from './../common/TopWithBack.vue'
import { sendmessage, findPwd } from '@/api/login'
import { Message, MessageBox, Loading } from 'element-ui'
export default{
  name: 'Register',
  data(){
    return{ 
      telpahone: '',//账号
      password: '',//密码
      repassword: '',//再次输入的密码
      code: '',//输入的验证码
      timer: 0,//定时器
      count: 60,//倒计时
      verify:'',//返回的验证码
      agree:'',//判断用户协议是否同意
    }
  },
  methods:{
    //发送验证信息
    send_message: function() {
      if (this.timer > 0) {
          return false;
      }
      if (this.telpahone == '') {
          this.$vux.toast.show({
            text: '请输入您的手机号',
            type: 'warn',
            time: 800,
          })
          return;
      }
      if (!(/^1[3|4|5|8]\d{9}$/.test(this.telpahone))) {
          this.$vux.toast.show({
            text: '手机号有误，请重新输入！',
            type: 'warn',
            time: 800,
          })
          return;
      }
      var tenp_count = this.count;
      this.timer = tenp_count;
      var self = this
      var countimer = setInterval(function() {
          if (self.timer == 0) {
              clearInterval(countimer);
              return
          } else {
              self.timer = self.timer - 1;
          }

      }, 1000)
      let param = {
        phone:this.telpahone,
        check:1
      }
      sendmessage(param).then(response=>{
        console.log(response)
          this.verify = response.data.code
          Message({
            message: response.msg,
            type: 'success',
            duration: 5 * 1000,
            // location:'middle'
          })
      })        

    },
    //找回前验证
    findPwd: function() {
      var telpahone = this.telpahone
      var code = this.code
      var password = this.password
      var repassword = this.repassword
      if (telpahone == '') {
          Message({
            message: '手机号不能为空',
            type: 'warning',
            duration: 5 * 1000,
            // location:'middle'
          })
          return
      }
      if (!(/^1[3|4|5|8]\d{9}$/.test(telpahone))) {
          this.$vux.toast.show({
            text: '手机号有误，请重新输入！',
            type: 'warn',
            time: 800,
          })
          return
      }
      if (code == '') {
          this.$vux.toast.show({
            text: '请输入验证码',
            type: 'warn',
            time: 800,
          })
          return
      }
      if (password == '') {
          this.$vux.toast.show({
            text: '请输入您的密码',
            type: 'warn',
            time: 800,
          })
          return
      }
       if (repassword == '') {
          this.$vux.toast.show({
            text: '请再次输入您的密码',
            type: 'warn',
            time: 800,
          })
          return
      } 
      this.doFindPwd()

    },
    //找回密码
    doFindPwd: function() {
      if(this.verify!== this.code){
        this.$vux.toast.show({
          text: '您输入的验证码有误,请重新输入',
          type: 'warn',
          time: 800,
        })  
        return
      }
      if(this.repassword !== this.password){
        this.$vux.toast.show({
          text: '您两次输入的密码不一致,请重新输入你的密码',
          type: 'warn',
          time: 800,
        })
         return
      }
      let param = {
        phone:this.telpahone,
        password:this.password,
        repassword:this.repassword,
        verify:this.verify
      }
      findPwd(param).then(response=>{
        Message({
            message: response.msg,
            type: 'success',
            duration: 5 * 1000,
            // location:'middle'
        })
        this.$router.go(-1)
      })
    }
  },
  components:{
    TopWithBack,
  }
}
</script>
<style>
.home{
  font-size:50px;
}
</style>


